<template>
  <div class="directory">
    <div class="app-container">
      <!-- 卡片 -->
      <el-card shadow="never">
        <!-- input表格 -->
        <el-form>
          <el-form-item label="标签名称" class="name_of_activity">
            <el-input v-model="queryInfo.tagName" class="input__inner"></el-input>
          </el-form-item>
          <el-form-item label="状态" class="state">
            <el-select v-model="value" placeholder="请选择" class="x">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
          </el-form-item>
          <div class="directory_div">
            <el-button class="directory-item" size="small" @click="bb">清除</el-button>
            <!-- 重置按钮 -->
            <el-button class="directory-item" @click="searchkey_word" size="small" type="primary">搜索</el-button>
          </div>
          <div class="new_box">
            <el-button v-if="$route.query.id" size="small" class="btn-retreat" :sapn="2" type="text" icon="el-icon-back" @click="$router.push('/subjects/list')">返回学科</el-button>
            <el-button type="success" class="success_button" size="small" icon="el-icon-edit" @click="get_subjects">新增标签</el-button>
          </div>
        </el-form>
        <!-- 数据提示 -->
        <el-alert :title="`共有${counts}条数据`" type="info" show-icon :closable="false"></el-alert>
        <!-- 表格 -->
        <el-table :data="list" style="width: 100%">
          <el-table-column type="index" label="序号"> </el-table-column>
          <el-table-column prop="subjectName" label="所属学科"> </el-table-column>
          <el-table-column prop="tagName" label="标签名称"> </el-table-column>
          <el-table-column prop="username" label="创建者"> </el-table-column>
          <el-table-column label="创建日期" width="200">
            <template slot-scope="scoped">{{ scoped.row.addDate | parseTimeByString }} </template>
          </el-table-column>
          <el-table-column prop="totals" label="面试题数量"> </el-table-column>
          <el-table-column prop="state" label="状态">
            <template slot-scope="scoped">
              {{ scoped.row.state === 1 ? '已启用' : '未启用' }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scoped">
              <el-button type="text" @click="onClassify(scoped.row)">
                {{ scoped.row.state === 0 ? '启用' : '禁用' }}
              </el-button>
              <el-button type="text" :disabled="scoped.row.state === 1 ? true : false" @click="recompose_dialog(scoped.row)">修改</el-button>
              <el-button type="text" :disabled="scoped.row.state === 1 ? true : false" @click="open(scoped.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.page"
          :page-sizes="[5, 12, 15]"
          :page-size="queryInfo.pagesize"
          layout=" prev,pager,next,sizes,jumper"
          :total="counts"
        ></el-pagination>
        <!-- 增加弹框标签 -->
        <el-dialog title="新增目录" :visible.sync="dialogVisible" width="400px">
          <el-form :rules="rules" :model="ruleForm">
            <el-form-item label="所属学科">
              <el-select v-model="form.value" placeholder="请选择" class="pull_down_box">
                <el-option v-for="item in datas" :label="item.subjectName" :key="item.id" :value="item.id"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="目录名称" prop="name">
              <el-input placeholder="请输入目录名称" class="directorys_page_input" v-model="ruleForm.name" maxlength="5"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer">
            <el-button @click="tags_call">取 消</el-button>
            <el-button type="primary" @click="add_page(form.value)">确 定</el-button>
          </span>
        </el-dialog>
        <!-- 修改目录弹框 -->
        <el-dialog title="修改目录" :visible.sync="dialog" width="400px">
          <el-form>
            <el-form-item label="所属学科">
              <el-select v-model="ab.subjectName" placeholder="请选择" class="pull_down_box">
                <el-option v-for="item in datas" :label="item.subjectName" :key="item.id" :value="item.id"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="目录名称">
              <el-input placeholder="请输入目录名称" class="directorys_page_input" v-model="ab.tagName"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer">
            <el-button @click="dialog = false">取 消</el-button>
            <el-button type="primary" @click="amend">确 定</el-button>
          </span>
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import { list, add, changeState, update, remove } from '@/api/hmmm/tags.js'
import { list as res } from '@/api/hmmm/subjects.js'
export default {
  name: 'tags',
  components: {},
  props: {},
  data() {
    return {
      ruleForm: {
        name: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
        ]
      },
      form: {
        value: ''
      },
      list: [], // 渲染页面数据
      counts: 0, // 总页数
      queryInfo: {
        page: 1, // 当前页数
        pagesize: 5, // 页尺寸
        tagName: '', //
        state: null,
        subjectID: undefined
      },
      dialogVisible: false, // 新增目录弹框显示状态
      dialog: false, // 修改目录 弹框
      // 下拉框数据
      datas: [],

      tagName: '', // 目录名称
      options: [
        {
          value: '1',
          label: '禁用'
        },
        {
          value: '2',
          label: '启用'
        }
      ],
      value: '', // 按钮的禁止状态
      ab: {}
    }
  },
  computed: {},
  watch: {},
  // 生命周期函数
  created() {
    // 请求数据 渲染页面
    this.tagList()
  },
  mounted() {},
  // 执行方法
  methods: {
    // 请求数据渲染页面
    async tagList() {
      this.queryInfo.subjectID = this.$route.query.id ? this.$route.query.id : undefined
      const { data } = await list(this.queryInfo)
      this.list = data.items
      this.counts = data.counts

      // console.log(this.list);
    },
    // 分页获取数据
    handleCurrentChange(val) {
      this.queryInfo.page = val
      this.tagList()
    },
    handleSizeChange(newpage) {
      this.queryInfo.pagesize = newpage
      this.tagList()
    },
    //  搜索关键词
    searchkey_word() {
      this.tagList()
    },
    //  清除搜索关键词
    bb() {
      this.queryInfo.tagName = ''
      // 请求数据 渲染页面
      this.tagList()
    },
    // 获取学科数据
    async get_subjects() {
      this.dialogVisible = true // 显示弹框
      const { data } = await res()
      this.datas = data.items
    },
    // 新增目录
    async add_page(a) {
      this.dialogVisible = false // 关闭弹框
      await add({
        subjectID: a,
        tagName: this.ruleForm.name
      })
      this.tagList()
    },
    // 取消新增目录
    tags_call() {
      // 关闭弹框
      this.dialogVisible = false
      this.form.value = ''
      this.ruleForm.name = ''
    },

    // 修改标签状态
    async onClassify(a) {
      var targetState = a.state // 得到当前的状态
      if (targetState === 1) {
        // 如果当前状态是1  就让他改变为0
        targetState = 0
      } else {
        targetState = 1
      }
      await changeState({
        id: a.id,
        state: targetState
      })
      // 请求数据 渲染页面
      this.tagList()
    },
    // 删除弹框
    open(i) {
      this.$confirm('此操作将永久删除该标签, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove({
          id: i.id
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        // 请求数据 渲染页面
        this.tagList()
      })
    },
    //  修改目录
    async recompose_dialog(c) {
      this.get_subjects()

      this.dialog = true // 显示弹框
      this.ab = c

      // 请求数据 渲染页面
      this.tagList()
      this.dialogVisible = false // 显示弹框
    },
    // 缺认修改
    async amend() {
      this.dialog = false
      await update(this.ab)
      this.tagList()
    }
  }
}
</script>

<style scoped lang="less">
.new_box {
  position: relative;
}
.btn-retreat {
  position: absolute;
  right: 110px;
  top: 0px;
  float: right;
}
.success_button {
  float: right;
}
.el-form-item__content {
  display: flex;

  text-align: center;
  position: relative;
}

.directory_div {
  position: absolute;
  left: 580px;
  top: 42px;
}
.input__inner {
  width: 188px;
  height: 32px;
}
.name_of_activity {
  float: left;
  margin-right: 30px;
}
.state {
  float: left;
}

.pull_down_box {
  width: 280px;
}
.directorys_page_input {
  width: 280px;
}
.x {
  width: 203px;
}
</style>
